<template>
  <div class="flexColumn" style="overflow-y: scroll;margin-top: 60px">
    <div class="flexRow" style="margin-top: -70px">
      <el-card class="box-card card flexColumn" style="height: 150px;width: 100%">
        <span class="mText">线下探望统计</span>
        <el-row style="margin-top: 20px">
          <el-col :span="8">
            <div class="flexColumn" style="align-items: center">
              <span class="lText" style="margin-bottom: 10px">{{ names[names.length - 1] }}</span>
              <span class="sText">总访问时间最长用户</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flexColumn" style="align-items: center">
              <span class="lText" style="margin-bottom: 10px">{{ Math.max(...durations) }} 分钟</span>
              <span class="sText">最高总访问时长</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flexColumn" style="align-items: center">
              <span class="lText" style="margin-bottom: 10px">{{ Math.max(...counts) }} 次</span>
              <span class="sText">最高总访问次数</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="flexRow" style="margin-top: 20px">
      <el-card class="box-card card flexColumn" style="width: calc(50% - 10px);margin-right: 20px">
        <div class="flexRow">
          <span class="mText">本周访问时长排行榜</span>
          <!--          <el-button style="margin-left: auto">推送本周排行榜至小程序</el-button>-->
        </div>
        <div v-if="weekAttendance.length" ref="chart2" style="height: 500px"></div>
        <div v-else style="height: 500px;width: 100%" class="flexColumn">
          <div style="margin: auto; width: 120px;height: 120px" class="flexColumn">
            <svg style="margin: auto" t="1708426155933" class="icon" viewBox="0 0 1666 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="8968" width="100" height="100">
              <path
                  d="M1659.700493 956.420446v1.980501a65.599053 65.599053 0 0 1-65.599052 65.599053H492.457707a65.599053 65.599053 0 0 1-65.599053-65.599053v-1.980501a65.599053 65.599053 0 0 1 65.599053-65.599053h192.027787c16.167357-0.687113 66.730768-7.194474 83.908585-61.516795 16.571541-52.543912-36.376554-75.178212-56.949516-81.928083H66.569094a66.609513 66.609513 0 0 1 0-133.178607h457.334123l-1.414644-3.435563s68.307085 3.435563 88.920466-64.871522c15.884429-52.907677-31.768857-77.118295-54.079811-85.363647H377.346122a66.609513 66.609513 0 0 1 0-133.380699h1137.21192a66.609513 66.609513 0 0 1 0 133.380699H1277.221235c-16.167357 0.404184-81.806828 6.264851-81.806828 75.137793 0 78.532939 71.661812 78.0075 71.661812 78.0075v0.687113h333.087981a66.609513 66.609513 0 0 1 0 133.178606h-162.886126l0.444602 0.970042s-79.988001-3.03138-79.988001 71.459719c0 57.192027 38.963331 68.711269 57.11119 71.015118h179.255576a65.599053 65.599053 0 0 1 65.599052 65.437379zM1280.616381 460.527176z"
                  fill="#D3E1F2" p-id="8969"></path>
              <path
                  d="M720.498283 475.118216S723.974265 396.100257 634.932544 396.100257s-81.5239 98.742135-81.5239 98.742135h168.746793z"
                  fill="#F2F2F2" p-id="8970"></path>
              <path
                  d="M734.887231 506.563726h-192.310716l-0.848787-10.832129c0-2.101756-3.597237-52.543912 26.554885-84.878627 16.167357-17.460746 38.639984-26.352793 66.649931-26.352792 31.405092 0 56.019893 9.094139 73.157292 26.999486 23.563923 24.65522 24.251036 57.474956 24.251036 63.376042z m-169.757253-23.40225h144.334084l-0.646695-7.80075v-0.727531c0-0.646694 0.646694-28.292875-17.824511-47.249102-12.529702-13.014723-31.405092-19.602921-56.060312-19.602921-21.260075 0-37.912453 6.345688-49.512532 18.87539-15.965265 17.218236-19.562502 42.196803-20.330452 56.504914z"
                  fill="#5A9CE5" p-id="8971"></path>
              <path
                  d="M738.726978 471.157213s2.546359-41.469272-63.093112-41.469271c-54.84776 0-60.14257 51.816381-60.142569 51.81638h124.448233z"
                  fill="#D6E9FC" p-id="8972"></path>
              <path
                  d="M542.172331 504.744898v-5.860667c-0.565858-17.905348 2.142175-62.365581 30.354213-90.658456 15.6015-15.763173 36.376554-23.927689 61.39554-24.251036h6.305269l-0.282928 4.365186 13.095559 10.427946-8.083678 10.023761-7.80075-0.525439h-2.425104c-19.1179 0-33.830195 5.618157-45.02609 16.935307-22.351372 22.674719-23.64476 61.920979-23.483087 73.399803v4.567278zM634.568778 408.225775z m1.980502-24.251036z"
                  fill="#5A9CE5" p-id="8973"></path>
              <path
                  d="M656.718058 398.202013c1.657154 0.323347 3.354727 0.606276 4.971462 1.01046s3.314308 0.848786 4.890626 1.333807c41.50969 12.893468 51.008013 50.886757 53.109769 70.004657v421.725518s-5.820249 93.245234 80.836787 99.348412c78.896704 5.577738 99.025064-77.724571 99.025064-77.764989h266.074285V482.393527s1.980501-87.182475-78.937123-87.182475H644.228774"
                  fill="#F6F6F6" p-id="8974"></path>
              <path
                  d="M808.367871 1004.11415c-2.788869 0-5.658575 0-8.609118-0.282928-78.290428-5.496902-94.579041-75.865325-92.436866-112.282298v-420.351292c-2.101756-17.824512-10.670456-48.502072-44.460233-59.010855-1.25297-0.404184-2.667614-0.808368-4.04184-1.131715s-2.101756-0.444602-3.112216-0.646694l-1.333807-0.24251 0.565858-2.748451h-10.710875v-24.251036h442.500573c26.231537 0 47.572449 8.083679 63.416459 24.251036 28.292875 29.101243 27.807855 73.399803 27.767437 75.259048v443.430196h-269.46943c-8.04326 22.593882-34.557726 78.0075-100.075942 78.007499zM731.855852 893.246497c-0.24251 4.041839-3.395145 81.160134 69.4388 86.29327 67.498717 4.809789 85.565739-65.477798 86.333688-68.468759l2.26343-9.29623h263.447089V478.311269c-0.565858-9.781251-3.597237-36.376554-20.775054-53.918137-11.07464-11.236313-26.474048-16.935307-45.834458-16.935307h-383.974739c21.745096 20.209197 27.484508 47.976633 28.979988 61.759305V893.246497z"
                  fill="#5A9CE5" p-id="8975"></path>
              <path
                  d="M830.032129 523.014012h227.595974v24.453128h-227.595974zM830.032129 609.388119h227.595974v24.453128h-227.595974zM830.032129 695.721808h227.595974v24.453128h-227.595974zM830.032129 782.095915h227.595974v24.453128h-227.595974z"
                  fill="#5A9CE5" p-id="8976"></path>
              <path
                  d="M1203.013065 619.613973l-58.727926-13.863509-58.727926-13.823091 30.717979 51.937636 30.677561 51.937636 216.480916 159.24847a49.06793 49.06793 0 0 0 55.939056-76.026998z"
                  fill="#F6F6F6" p-id="8977"></path>
              <path
                  d="M1380.490231 870.248431a60.14257 60.14257 0 0 1-20.209197-3.5164 11.761753 11.761753 0 0 1-4.041839-1.899665l-215.470456-158.561358a12.125518 12.125518 0 0 1-4.324768-4.284349L1075.129268 598.192224a12.125518 12.125518 0 0 1 13.33807-18.10744l117.455851 27.646181a12.368028 12.368028 0 0 1 5.53732 2.990961L1426.769291 769.081192a12.610539 12.610539 0 0 1 3.03138 3.193053 61.274285 61.274285 0 0 1-49.270022 97.974186z m-11.31715-26.271956A36.861575 36.861575 0 0 0 1410.601934 787.592816l-213.004934-156.74253-86.859127-20.532544L1155.966055 687.11269z"
                  fill="#5A9CE5" p-id="8978"></path>
              <path d="M1202.972647 620.988198l-56.504915 73.844405" fill="#F6F6F6" p-id="8979"></path>
              <path
                  d="M1146.467732 707.079376a12.125518 12.125518 0 0 1-9.700414-19.683757l56.585751-73.844405a12.125518 12.125518 0 0 1 19.441247 14.873969l-56.585751 73.844405a12.125518 12.125518 0 0 1-9.740833 4.809788z"
                  fill="#5A9CE5" p-id="8980"></path>
              <path
                  d="M1104.311348 407.740754v485.950345h49.55295V487.85001s4.688534-72.268088-49.55295-80.109256zM1197.394908 905.008249c-3.233471 18.188277-16.369449 66.93286-64.426919 89.728834h38.842076c69.277127 0 71.580975-89.728834 71.580975-89.728834z"
                  fill="#4989E8" p-id="8981"></path>
              <path
                  d="M799.192895 991.30152c76.22909 0 99.307993-84.878626 99.307993-84.878627h353.337596s-2.303848 89.728834-71.580975 89.728834H801.496744"
                  fill="#F6F6F6" p-id="8982"></path>
              <path
                  d="M1180.217091 1008.277245h-378.720347v-4.769371h-2.303849v-24.251036c65.760726 0 86.657036-72.753108 87.505822-76.026998l2.465522-8.972883h375.244366l-0.323347 12.529702c-0.929623 34.96191-19.602921 101.490586-83.868167 101.490586z m-320.437024-24.453128H1180.217091c43.126426 0 54.969015-43.207263 58.162068-65.275706h-330.945806a143.16195 143.16195 0 0 1-47.612868 65.275706z"
                  fill="#5A9CE5" p-id="8983"></path>
              <path
                  d="M413.237655 0h6.669035v28.979988h28.979989v6.669035h-28.979989V64.66943h-6.669035V35.649023H383.974739V28.979988h29.101243zM714.233432 182.1657H719.447405v21.745095h21.745095v4.971463H719.447405v21.866351h-5.011881v-21.866351h-21.825933v-4.971463h21.825933z"
                  fill="#C6E7F7" p-id="8984"></path>
              <path
                  d="M72.348924 335.796013h6.669035v28.979989h28.979989v6.709453h-28.979989v29.101243H72.348924v-29.101243h-29.141661v-6.709453h29.141661zM1480.081153 149.548056h5.496901v23.806434h23.806434v5.496901h-23.806434v23.927689h-5.496901v-23.766015h-23.887271v-5.496902h23.887271zM1479.313203 488.456286a34.113124 34.113124 0 1 1 34.113124-34.072706 34.153543 34.153543 0 0 1-34.113124 34.072706z m0-55.979475a21.906769 21.906769 0 1 0 21.866351 21.906769A21.906769 21.906769 0 0 0 1479.313203 432.476811z"
                  fill="#94CBED" p-id="8985"></path>
              <path
                  d="M476.937044 249.34107a34.113124 34.113124 0 1 1 34.113124-34.113124 34.153543 34.153543 0 0 1-34.113124 34.113124z m0-55.979475a21.866351 21.866351 0 1 0 21.906769 21.866351 21.906769 21.906769 0 0 0-21.906769-21.866351z"
                  fill="#5DB6E2" p-id="8986"></path>
              <path
                  d="M49.512532 188.268877a34.113124 34.113124 0 1 1 34.113124-34.072706 34.113124 34.113124 0 0 1-34.113124 34.072706z m0-55.979475a21.906769 21.906769 0 1 0 21.866351 21.906769 21.906769 21.906769 0 0 0-21.866351-21.906769z"
                  fill="#94CBED" p-id="8987"></path>
              <path
                  d="M245.622577 253.180817m-10.387527 0a10.387527 10.387527 0 1 0 20.775055 0 10.387527 10.387527 0 1 0-20.775055 0Z"
                  fill="#C6E7F7" p-id="8988"></path>
            </svg>
            <span style="text-align: center;color: var(--lightText);font-weight: lighter">暂无本周记录</span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card flexColumn" style="width: calc(50% - 10px)">
        <div class="flexRow">
          <span class="mText">访问时长总排行榜</span>
        </div>
        <div ref="chart" style="height: 500px"></div>
      </el-card>
    </div>

    <div class="flexRow" style="margin-top: 20px">
      <el-card class="box-card card flexColumn" style="width: calc(50% - 10px);margin-right: 20px">
        <div class="flexRow">
          <span class="mText">本周访问频次排行榜</span>
        </div>
        <div v-if="weekAttendance.length" ref="chart4" style="height: 500px"></div>
        <div v-else style="height: 500px;width: 100%" class="flexColumn">
          <div style="margin: auto; width: 120px;height: 120px" class="flexColumn">
            <svg style="margin: auto" t="1708426155933" class="icon" viewBox="0 0 1666 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="8968" width="100" height="100">
              <path
                  d="M1659.700493 956.420446v1.980501a65.599053 65.599053 0 0 1-65.599052 65.599053H492.457707a65.599053 65.599053 0 0 1-65.599053-65.599053v-1.980501a65.599053 65.599053 0 0 1 65.599053-65.599053h192.027787c16.167357-0.687113 66.730768-7.194474 83.908585-61.516795 16.571541-52.543912-36.376554-75.178212-56.949516-81.928083H66.569094a66.609513 66.609513 0 0 1 0-133.178607h457.334123l-1.414644-3.435563s68.307085 3.435563 88.920466-64.871522c15.884429-52.907677-31.768857-77.118295-54.079811-85.363647H377.346122a66.609513 66.609513 0 0 1 0-133.380699h1137.21192a66.609513 66.609513 0 0 1 0 133.380699H1277.221235c-16.167357 0.404184-81.806828 6.264851-81.806828 75.137793 0 78.532939 71.661812 78.0075 71.661812 78.0075v0.687113h333.087981a66.609513 66.609513 0 0 1 0 133.178606h-162.886126l0.444602 0.970042s-79.988001-3.03138-79.988001 71.459719c0 57.192027 38.963331 68.711269 57.11119 71.015118h179.255576a65.599053 65.599053 0 0 1 65.599052 65.437379zM1280.616381 460.527176z"
                  fill="#D3E1F2" p-id="8969"></path>
              <path
                  d="M720.498283 475.118216S723.974265 396.100257 634.932544 396.100257s-81.5239 98.742135-81.5239 98.742135h168.746793z"
                  fill="#F2F2F2" p-id="8970"></path>
              <path
                  d="M734.887231 506.563726h-192.310716l-0.848787-10.832129c0-2.101756-3.597237-52.543912 26.554885-84.878627 16.167357-17.460746 38.639984-26.352793 66.649931-26.352792 31.405092 0 56.019893 9.094139 73.157292 26.999486 23.563923 24.65522 24.251036 57.474956 24.251036 63.376042z m-169.757253-23.40225h144.334084l-0.646695-7.80075v-0.727531c0-0.646694 0.646694-28.292875-17.824511-47.249102-12.529702-13.014723-31.405092-19.602921-56.060312-19.602921-21.260075 0-37.912453 6.345688-49.512532 18.87539-15.965265 17.218236-19.562502 42.196803-20.330452 56.504914z"
                  fill="#5A9CE5" p-id="8971"></path>
              <path
                  d="M738.726978 471.157213s2.546359-41.469272-63.093112-41.469271c-54.84776 0-60.14257 51.816381-60.142569 51.81638h124.448233z"
                  fill="#D6E9FC" p-id="8972"></path>
              <path
                  d="M542.172331 504.744898v-5.860667c-0.565858-17.905348 2.142175-62.365581 30.354213-90.658456 15.6015-15.763173 36.376554-23.927689 61.39554-24.251036h6.305269l-0.282928 4.365186 13.095559 10.427946-8.083678 10.023761-7.80075-0.525439h-2.425104c-19.1179 0-33.830195 5.618157-45.02609 16.935307-22.351372 22.674719-23.64476 61.920979-23.483087 73.399803v4.567278zM634.568778 408.225775z m1.980502-24.251036z"
                  fill="#5A9CE5" p-id="8973"></path>
              <path
                  d="M656.718058 398.202013c1.657154 0.323347 3.354727 0.606276 4.971462 1.01046s3.314308 0.848786 4.890626 1.333807c41.50969 12.893468 51.008013 50.886757 53.109769 70.004657v421.725518s-5.820249 93.245234 80.836787 99.348412c78.896704 5.577738 99.025064-77.724571 99.025064-77.764989h266.074285V482.393527s1.980501-87.182475-78.937123-87.182475H644.228774"
                  fill="#F6F6F6" p-id="8974"></path>
              <path
                  d="M808.367871 1004.11415c-2.788869 0-5.658575 0-8.609118-0.282928-78.290428-5.496902-94.579041-75.865325-92.436866-112.282298v-420.351292c-2.101756-17.824512-10.670456-48.502072-44.460233-59.010855-1.25297-0.404184-2.667614-0.808368-4.04184-1.131715s-2.101756-0.444602-3.112216-0.646694l-1.333807-0.24251 0.565858-2.748451h-10.710875v-24.251036h442.500573c26.231537 0 47.572449 8.083679 63.416459 24.251036 28.292875 29.101243 27.807855 73.399803 27.767437 75.259048v443.430196h-269.46943c-8.04326 22.593882-34.557726 78.0075-100.075942 78.007499zM731.855852 893.246497c-0.24251 4.041839-3.395145 81.160134 69.4388 86.29327 67.498717 4.809789 85.565739-65.477798 86.333688-68.468759l2.26343-9.29623h263.447089V478.311269c-0.565858-9.781251-3.597237-36.376554-20.775054-53.918137-11.07464-11.236313-26.474048-16.935307-45.834458-16.935307h-383.974739c21.745096 20.209197 27.484508 47.976633 28.979988 61.759305V893.246497z"
                  fill="#5A9CE5" p-id="8975"></path>
              <path
                  d="M830.032129 523.014012h227.595974v24.453128h-227.595974zM830.032129 609.388119h227.595974v24.453128h-227.595974zM830.032129 695.721808h227.595974v24.453128h-227.595974zM830.032129 782.095915h227.595974v24.453128h-227.595974z"
                  fill="#5A9CE5" p-id="8976"></path>
              <path
                  d="M1203.013065 619.613973l-58.727926-13.863509-58.727926-13.823091 30.717979 51.937636 30.677561 51.937636 216.480916 159.24847a49.06793 49.06793 0 0 0 55.939056-76.026998z"
                  fill="#F6F6F6" p-id="8977"></path>
              <path
                  d="M1380.490231 870.248431a60.14257 60.14257 0 0 1-20.209197-3.5164 11.761753 11.761753 0 0 1-4.041839-1.899665l-215.470456-158.561358a12.125518 12.125518 0 0 1-4.324768-4.284349L1075.129268 598.192224a12.125518 12.125518 0 0 1 13.33807-18.10744l117.455851 27.646181a12.368028 12.368028 0 0 1 5.53732 2.990961L1426.769291 769.081192a12.610539 12.610539 0 0 1 3.03138 3.193053 61.274285 61.274285 0 0 1-49.270022 97.974186z m-11.31715-26.271956A36.861575 36.861575 0 0 0 1410.601934 787.592816l-213.004934-156.74253-86.859127-20.532544L1155.966055 687.11269z"
                  fill="#5A9CE5" p-id="8978"></path>
              <path d="M1202.972647 620.988198l-56.504915 73.844405" fill="#F6F6F6" p-id="8979"></path>
              <path
                  d="M1146.467732 707.079376a12.125518 12.125518 0 0 1-9.700414-19.683757l56.585751-73.844405a12.125518 12.125518 0 0 1 19.441247 14.873969l-56.585751 73.844405a12.125518 12.125518 0 0 1-9.740833 4.809788z"
                  fill="#5A9CE5" p-id="8980"></path>
              <path
                  d="M1104.311348 407.740754v485.950345h49.55295V487.85001s4.688534-72.268088-49.55295-80.109256zM1197.394908 905.008249c-3.233471 18.188277-16.369449 66.93286-64.426919 89.728834h38.842076c69.277127 0 71.580975-89.728834 71.580975-89.728834z"
                  fill="#4989E8" p-id="8981"></path>
              <path
                  d="M799.192895 991.30152c76.22909 0 99.307993-84.878626 99.307993-84.878627h353.337596s-2.303848 89.728834-71.580975 89.728834H801.496744"
                  fill="#F6F6F6" p-id="8982"></path>
              <path
                  d="M1180.217091 1008.277245h-378.720347v-4.769371h-2.303849v-24.251036c65.760726 0 86.657036-72.753108 87.505822-76.026998l2.465522-8.972883h375.244366l-0.323347 12.529702c-0.929623 34.96191-19.602921 101.490586-83.868167 101.490586z m-320.437024-24.453128H1180.217091c43.126426 0 54.969015-43.207263 58.162068-65.275706h-330.945806a143.16195 143.16195 0 0 1-47.612868 65.275706z"
                  fill="#5A9CE5" p-id="8983"></path>
              <path
                  d="M413.237655 0h6.669035v28.979988h28.979989v6.669035h-28.979989V64.66943h-6.669035V35.649023H383.974739V28.979988h29.101243zM714.233432 182.1657H719.447405v21.745095h21.745095v4.971463H719.447405v21.866351h-5.011881v-21.866351h-21.825933v-4.971463h21.825933z"
                  fill="#C6E7F7" p-id="8984"></path>
              <path
                  d="M72.348924 335.796013h6.669035v28.979989h28.979989v6.709453h-28.979989v29.101243H72.348924v-29.101243h-29.141661v-6.709453h29.141661zM1480.081153 149.548056h5.496901v23.806434h23.806434v5.496901h-23.806434v23.927689h-5.496901v-23.766015h-23.887271v-5.496902h23.887271zM1479.313203 488.456286a34.113124 34.113124 0 1 1 34.113124-34.072706 34.153543 34.153543 0 0 1-34.113124 34.072706z m0-55.979475a21.906769 21.906769 0 1 0 21.866351 21.906769A21.906769 21.906769 0 0 0 1479.313203 432.476811z"
                  fill="#94CBED" p-id="8985"></path>
              <path
                  d="M476.937044 249.34107a34.113124 34.113124 0 1 1 34.113124-34.113124 34.153543 34.153543 0 0 1-34.113124 34.113124z m0-55.979475a21.866351 21.866351 0 1 0 21.906769 21.866351 21.906769 21.906769 0 0 0-21.906769-21.866351z"
                  fill="#5DB6E2" p-id="8986"></path>
              <path
                  d="M49.512532 188.268877a34.113124 34.113124 0 1 1 34.113124-34.072706 34.113124 34.113124 0 0 1-34.113124 34.072706z m0-55.979475a21.906769 21.906769 0 1 0 21.866351 21.906769 21.906769 21.906769 0 0 0-21.866351-21.906769z"
                  fill="#94CBED" p-id="8987"></path>
              <path
                  d="M245.622577 253.180817m-10.387527 0a10.387527 10.387527 0 1 0 20.775055 0 10.387527 10.387527 0 1 0-20.775055 0Z"
                  fill="#C6E7F7" p-id="8988"></path>
            </svg>
            <span style="text-align: center;color: var(--lightText);font-weight: lighter">暂无本周记录</span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card flexColumn" style="width: calc(50% - 10px)">
        <div class="flexRow">
          <span class="mText">访问频次总排行榜</span>
        </div>
        <div ref="chart3" style="height: 500px"></div>
      </el-card>
    </div>

    <el-card class="box-card card flexColumn specialCard" style="width: 100%;margin-top: 20px">
      <div class="flexRow" style="margin-bottom: 30px">
        <span class="mText">线下访问记录</span>
        <div style="margin-left: auto">
          <el-input
              class="input"
              suffix-icon="el-icon-search"
              v-model="keyword"
              clearable
              @keydown.enter.native="search"
          />
          <el-dropdown @click="search()" size="large" split-button trigger="click" @command="handleClick">
            <span style="color: var(--btnText)">{{ btnWord }}</span>
            <el-dropdown-menu ref="dropdown" slot="dropdown" :append-to-body="false"
                              style="background-color: var(--lightBg)!important;border: none">
              <el-dropdown-item command="visitor_id">根据到访用户搜索</el-dropdown-item>
              <el-dropdown-item command="elder_id">根据访问老人搜索</el-dropdown-item>
              <el-dropdown-item command="check_out_time">根据签到日期搜索</el-dropdown-item>
              <el-dropdown-item command="visit_duration">根据访问时长搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="here"></div>
      </div>
      <el-table
          :data="list"
          :header-cell-style="{
                height: '40px'
              }"
          :row-style="{height: '62px'}">
        <el-table-column width="10px"/>
        <el-table-column
            prop="visitor.name"
            label="到访用户">
        </el-table-column>
        <el-table-column
            prop="elderly.elderlyName"
            label="访问老人">
        </el-table-column>
        <el-table-column
            prop="checkInTime"
            label="签到时间">
        </el-table-column>
        <el-table-column
            prop="checkOutTime"
            label="签退时间">
        </el-table-column>
        <el-table-column
            label="访问时长">
          <template slot-scope="scope">
            <span>{{ scope.row.visitDuration }}</span> 分钟
          </template>
        </el-table-column>
        <el-table-column
            label="签到状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status === 1 ? '已完成' : '未完成' }}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          style="text-align: center;margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="11"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="pageChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Attendance",
  data() {
    return {
      //排行榜记录
      attendance: [],
      weekAttendance: [],
      counts: [],
      names: [],
      durations: [],
      //具体访问记录
      list: [],
      //养老院名称
      careHomeName: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).careHomeName : '',
      //分页相关
      currentPage: 1,
      pageSize: 7,
      total: 0,
      //搜索关键词
      keyword: '',
      searchMode: 'visitor_id'
    }
  },
  methods: {
    //获取记录
    load() {
      this.request.get('/manager-attendance/query-data', {params: {careHomeName: this.careHomeName}}).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '获取排行榜数据失败',
            message: res.msg
          })
        } else {
          this.attendance = res.data
          this.createChart()
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取排行榜数据失败',
          message: err
        })
      })
    },
    search() {
      this.request.get('/manager-attendance/query-records', {
        params: {
          careHomeName: this.careHomeName,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.keyword,
          type: this.searchMode
        }
      }).then(res => {
        if (res.code === '200') {
          this.list = res.data.records
          //将字符串属性转换为Long类型
          this.total = parseInt(res.data.total)
        } else {
          this.$notify({
            type: 'error',
            title: '获取到访记录失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取到访记录失败',
          message: err
        })
      })

      this.request.get('/manager-attendance/query-week', {params: {careHomeName: this.careHomeName}}).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '获取排行榜数据失败',
            message: res.msg
          })
        } else {
          this.weekAttendance = res.data
          this.createChart2()
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取排行榜数据失败',
          message: err
        })
      })
    },
    //换页
    pageChange(pageNum) {
      this.currentPage = pageNum
      this.search()
    },
    //修改搜索方式
    handleClick(command) {
      this.searchMode = command
    },
    //加载图表
    createChart() {
      const names = this.attendance.map(item => item[Object.keys(item)].user.name).reverse().slice(0, 10)
      const durations = this.attendance.map(item => item[Object.keys(item)].totalDuration).reverse().slice(0, 10)
      const counts = this.attendance.map(item => item[Object.keys(item)].visitCount).reverse().slice(0, 10)
      this.names = names
      this.durations = durations
      this.counts = counts
      this.$echarts.init(this.$refs.chart).setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "80",
          right: "20",
          bottom: "20",
          top: "20",
          containLabel: false,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: names,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 70,
            width: 60,
            align: "left",
            overflow: "truncate",
            formatter: (value, index) => {
              let ind = index + 1
              if (ind === names.length) {
                return "{one|" + (names.length - index) + "} {a|" + value + "}"
              } else if (ind + 1 === names.length) {
                return "{two|" + (names.length - index) + "} {b|" + value + "}"
              } else if (ind + 2 === names.length) {
                return (
                    "{three|" + (names.length - index) + "} {c|" + value + "}"
                )
              }
              if (names.length - index > 9) {
                return (
                    "{five|" + (names.length - index) + "} {d|" + value + "}"
                )
              }
              return "{four|" + (names.length - index) + "} {d|" + value + "}"
            },
            rich: {
              a: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              b: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              c: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              d: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              // 第一名
              one: {
                backgroundColor: "#E86452",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 第二名
              two: {
                backgroundColor: "#FF9845",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 第三名
              three: {
                backgroundColor: "#F6BD16",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 一位数
              four: {
                backgroundColor: "rgb(187,187,187)",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 两位数
              five: {
                backgroundColor: "rgb(187,187,187)",
                color: "white",
                width: 16,
                height: 16,
                padding: [1, 0, 0, 1],
                borderRadius: 10,
                fontSize: 11,
              },
            },
          },
        },
        series: [{
          type: "bar",
          showBackground: true,
          label: {
            show: true,
            position: "right",
            color: "dodgerblue",
            fontWeight: 'bolder'
          },
          barWidth: 20,
          data: durations,
          itemStyle: {
            //颜色样式部分
            borderRadius: 7,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {offset: 0, color: "royalblue"},
              {offset: 1, color: "#37BBF8"},
            ]),

          }
        },
        ],
      })


      //对数组按照 visitCount 属性进行排序
      this.attendance.sort((a, b) => {
        const visitCountA = parseInt(Object.values(a)[0].visitCount)
        const visitCountB = parseInt(Object.values(b)[0].visitCount)
        return visitCountB - visitCountA
      })

      //获取排序后的前两个元素的 user.name 和 visitCount
      const topTwoNamesAndCounts = this.attendance.map(item => {
        const userObj = Object.values(item)[0].user
        return {
          name: userObj.name,
          visitCount: Object.values(item)[0].visitCount
        }
      })
      //分别提取 user.name 和 visitCount
      const countNames = topTwoNamesAndCounts.map(item => item.name).reverse()
      const visitCounts = topTwoNamesAndCounts.map(item => item.visitCount).reverse()


      this.$echarts.init(this.$refs.chart3).setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "80",
          right: "20",
          bottom: "20",
          top: "20",
          containLabel: false,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: countNames,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 70,
            width: 60,
            align: "left",
            overflow: "truncate",
            formatter: (value, index) => {
              let ind = index + 1
              if (ind === countNames.length) {
                return "{one|" + (countNames.length - index) + "} {a|" + value + "}"
              } else if (ind + 1 === countNames.length) {
                return "{two|" + (countNames.length - index) + "} {b|" + value + "}"
              } else if (ind + 2 === countNames.length) {
                return (
                    "{three|" + (countNames.length - index) + "} {c|" + value + "}"
                )
              }
              if (countNames.length - index > 9) {
                return (
                    "{five|" + (countNames.length - index) + "} {d|" + value + "}"
                )
              }
              return "{four|" + (countNames.length - index) + "} {d|" + value + "}"
            },
            rich: {
              a: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              b: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              c: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              d: {
                color: "dodgerblue",
                fontWeight: 'bolder',
              },
              // 第一名
              one: {
                backgroundColor: "#E86452",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 第二名
              two: {
                backgroundColor: "#FF9845",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 第三名
              three: {
                backgroundColor: "#F6BD16",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 一位数
              four: {
                backgroundColor: "rgb(187,187,187)",
                color: "white",
                width: 12,
                height: 16,
                padding: [1, 0, 0, 5],
                borderRadius: 10,
                fontSize: 11,
              },
              // 两位数
              five: {
                backgroundColor: "rgb(187,187,187)",
                color: "white",
                width: 16,
                height: 16,
                padding: [1, 0, 0, 1],
                borderRadius: 10,
                fontSize: 11,
              },
            },
          },
        },
        series: [{
          type: "bar",
          showBackground: true,
          label: {
            show: true,
            position: "right",
            color: "dodgerblue",
            fontWeight: 'bolder'
          },
          barWidth: 20,
          data: visitCounts,
          itemStyle: {
            //颜色样式部分
            borderRadius: 7,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {offset: 0, color: "royalblue"},
              {offset: 1, color: "#37BBF8"},
            ]),

          }
        },
        ],
      })
    },

    //加载周图表
    createChart2() {
      const names = this.weekAttendance.map(item => item[Object.keys(item)].user.name).reverse().slice(0, 10)
      const durations = this.weekAttendance.map(item => item[Object.keys(item)].totalDuration).reverse().slice(0, 10)

      if (this.weekAttendance.length) {
        this.$echarts.init(this.$refs.chart2).setOption({
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "80",
            right: "20",
            bottom: "20",
            top: "20",
            containLabel: false,
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            data: names,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 70,
              width: 60,
              align: "left",
              overflow: "truncate",
              formatter: (value, index) => {
                let ind = index + 1
                if (ind === names.length) {
                  return "{one|" + (names.length - index) + "} {a|" + value + "}"
                } else if (ind + 1 === names.length) {
                  return "{two|" + (names.length - index) + "} {b|" + value + "}"
                } else if (ind + 2 === names.length) {
                  return (
                      "{three|" + (names.length - index) + "} {c|" + value + "}"
                  )
                }
                if (names.length - index > 9) {
                  return (
                      "{five|" + (names.length - index) + "} {d|" + value + "}"
                  )
                }
                return "{four|" + (names.length - index) + "} {d|" + value + "}"
              },
              rich: {
                a: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                b: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                c: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                d: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                // 第一名
                one: {
                  backgroundColor: "#E86452",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 第二名
                two: {
                  backgroundColor: "#FF9845",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 第三名
                three: {
                  backgroundColor: "#F6BD16",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 一位数
                four: {
                  backgroundColor: "rgb(187,187,187)",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 两位数
                five: {
                  backgroundColor: "rgb(187,187,187)",
                  color: "white",
                  width: 16,
                  height: 16,
                  padding: [1, 0, 0, 1],
                  borderRadius: 10,
                  fontSize: 11,
                },
              },
            },
          },
          series: [{
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "right",
              color: "dodgerblue",
              fontWeight: 'bolder'
            },
            barWidth: 20,
            data: durations,
            itemStyle: {
              //颜色样式部分
              borderRadius: 7,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {offset: 0, color: "royalblue"},
                {offset: 1, color: "#37BBF8"},
              ]),

            }
          },
          ],
        })
      }

      //对数组按照 visitCount 属性进行排序
      this.weekAttendance.sort((a, b) => {
        const visitCountA = parseInt(Object.values(a)[0].visitCount)
        const visitCountB = parseInt(Object.values(b)[0].visitCount)
        return visitCountB - visitCountA
      })

      //获取排序后的前两个元素的 user.name 和 visitCount
      const topTwoNamesAndCounts = this.weekAttendance.map(item => {
        const userObj = Object.values(item)[0].user
        return {
          name: userObj.name,
          visitCount: Object.values(item)[0].visitCount
        }
      })
      //分别提取 user.name 和 visitCount
      const countNames = topTwoNamesAndCounts.map(item => item.name).reverse()
      const visitCounts = topTwoNamesAndCounts.map(item => item.visitCount).reverse()

      if (this.weekAttendance.length) {
        this.$echarts.init(this.$refs.chart4).setOption({
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "80",
            right: "20",
            bottom: "20",
            top: "20",
            containLabel: false,
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            data: countNames,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 70,
              width: 60,
              align: "left",
              overflow: "truncate",
              formatter: (value, index) => {
                let ind = index + 1
                if (ind === countNames.length) {
                  return "{one|" + (countNames.length - index) + "} {a|" + value + "}"
                } else if (ind + 1 === countNames.length) {
                  return "{two|" + (countNames.length - index) + "} {b|" + value + "}"
                } else if (ind + 2 === countNames.length) {
                  return (
                      "{three|" + (countNames.length - index) + "} {c|" + value + "}"
                  )
                }
                if (countNames.length - index > 9) {
                  return (
                      "{five|" + (countNames.length - index) + "} {d|" + value + "}"
                  )
                }
                return "{four|" + (countNames.length - index) + "} {d|" + value + "}"
              },
              rich: {
                a: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                b: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                c: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                d: {
                  color: "dodgerblue",
                  fontWeight: 'bolder',
                },
                // 第一名
                one: {
                  backgroundColor: "#E86452",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 第二名
                two: {
                  backgroundColor: "#FF9845",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 第三名
                three: {
                  backgroundColor: "#F6BD16",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 一位数
                four: {
                  backgroundColor: "rgb(187,187,187)",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
                },
                // 两位数
                five: {
                  backgroundColor: "rgb(187,187,187)",
                  color: "white",
                  width: 16,
                  height: 16,
                  padding: [1, 0, 0, 1],
                  borderRadius: 10,
                  fontSize: 11,
                },
              },
            },
          },
          series: [{
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "right",
              color: "dodgerblue",
              fontWeight: 'bolder'
            },
            barWidth: 20,
            data: visitCounts,
            itemStyle: {
              //颜色样式部分
              borderRadius: 7,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {offset: 0, color: "royalblue"},
                {offset: 1, color: "#37BBF8"},
              ]),

            }
          },
          ],
        })
      }
    }
  },
  mounted() {
    this.load()
    this.search()
    //修改popper的所在位置
    this.$refs.here.appendChild(
        this.$refs.dropdown.popperElm
    )
  },
  computed: {
    //根据关键词类型显示按钮提示文字和图标
    btnWord() {
      switch (this.searchMode) {
        case 'visitor_id':
          return '根据到访用户搜索'
        case 'elder_id':
          return '根据访问老人搜索'
        case 'check_out_time':
          return '根据签到日期搜索'
        case 'visit_duration':
          return '根据访问时长搜索'
        default:
          return '搜索'
      }
    }
  },
}
</script>

<style scoped>
/*分页管理器样式*/
>>> .btn-quicknext, >>> .btn-quickprev, >>> .btn-next, >>> .btn-prev, >>> .number {
  color: var(--deepText) !important;
  background-color: var(--deepBg) !important;
}

>>> .btn-quicknext:hover, >>> .btn-quickprev:hover, >>> .btn-next:hover, >>> .btn-prev:hover, >>> .number:hover {
  background-color: var(--hover) !important;
}

>>> .active {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
}

>>> .active:hover {
  background-color: var(--btnActive) !important;
}

/*滚动条*/
::-webkit-scrollbar {
  overflow: auto;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--th);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightText);
}

/*表格样式*/
/*表头背景*/
>>> .el-table .cell {
  height: 20px;
}

>>> .el-table th {
  background-color: var(--lightBg) !important;
}

/*表头文字*/
>>> .el-table thead {
  color: var(--th)
}

/*背景*/
>>> .el-table tr {
  background-color: var(--lightBg);
  color: var(--deepText);
  font-weight: normal;
}

/*行间线*/
>>> .el-table td, .building-top .el-table th.is-leaf {
  border-bottom: 0 !important;
}

/*表格末尾*/
>>> .el-table::before {
  border-bottom: 0;
  height: 0;
}

>>> .el-table, .el-table__expanded-cell {
  background-color: var(--lightBg) !important;
}

/*鼠标悬浮*/
>>> .el-table tbody tr:hover > td {
  background-color: var(--hover) !important;
}

.specialCard:hover {
  background-color: var(--lightBg) !important;
}

/*card*/
>>> .el-card__header {
  border-color: var(--deepText);
}

.box-card:hover {
  background-color: var(--hover);
}

.card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
  flex-shrink: 0
}

/*文字*/
.sText {
  font-size: 13px;
  color: var(--lightText);
}

.lText {
  font-size: 24px;
  color: var(--deepText);
}

.mText {
  font-size: 18px;
  color: var(--deepText);
}

/*搜索按钮*/
>>> .el-button--default {
  font-size: 13px;
  font-weight: bold;
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
  transition: 0.2s;
}

>>> .el-button--default:hover {
  background-color: var(--btnActive);
}

>>> .el-button--default::before {
  display: none;
}

/*下拉框样式*/
>>> .el-dropdown__caret-button {
  font-size: 13px;
  font-weight: bold;
  margin-left: 2px !important;
  color: var(--btnText);
}

>>> .el-dropdown-menu {
  background-color: var(--inputBg) !important;
  padding: 0;
}

>>> .popper__arrow, >>> .popper__arrow::after {
  border-bottom-color: var(--inputBg) !important;
  border-top-color: var(--inputBg) !important;
}

>>> .el-dropdown-menu__item {
  color: var(--deepText);
  font-weight: bold;
  padding: 10px 30px;
  background-color: var(--inputBg);
}

>>> .el-dropdown-menu__item:hover {
  background-color: var(--hover);
  color: var(--deepText);
}

>>> .el-dropdown > .el-button-group > .el-button:not(:last-child) {
  width: 148px;
}

/*输入框样式*/
.input {
  margin-right: 20px;
  width: 300px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

>>> .el-input__inner {
  color: var(--deepText);
  background-color: var(--inputBg);
  border: solid 1px var(--inputBorder);
  border-radius: 5px;
}

>>> .el-select__caret {
  color: var(--deepText) !important;
}

>>> .el-date-editor .el-input__inner::placeholder {
  color: var(--lightText);
  padding-left: 10px;
}

>>> .el-input__inner::placeholder {
  color: var(--lightText);
}

>>> .el-input__icon {
  color: var(--deepText);
}

/*操作列样式*/
>>> td.cellClass .cell {
  height: 40px !important;
}

/*按钮*/
.btnOption {
  transition: 0.2s;
  padding: 10px 15px;
  color: var(--btnText);
  border: none;
  margin-top: 4px;
}

.primary {
  background-color: var(--btn);
}

.primary:hover {
  background-color: var(--btnActive);
}

.danger {
  background-color: var(--dangerHover);
}

.danger:hover {
  background-color: var(--danger);
}

.success {
  background-color: var(--success);
}

.success:hover {
  background-color: var(--successHover);
}

.resource {
  background-color: var(--resource);
}

.resource:hover {
  background-color: var(--resourceHover);
}
</style>